<template>
  <div class="preivew-wrapper white-bg">
    <div class="header-bar">
      <div class="header-title">
        <div class="tags" v-if="datas?.ai_enabled">
          {{ tags[0] }}
        </div>
        <div class="tags" v-if="datas?.twin_abled">
          {{ tags[1] }}
        </div>

        <div class="title-text">{{ datas?.name }}</div>
      </div>
      <header-center
        @change-direction="handleChangeDirection"
        @change-size="handleChangeSize"
        @change-history="handleChangeHistory"
      />
      <div class="header-btns">
        <div class="btns">
          <div class="flex" @click="handleToggleMore">
            <img
              src="@/assets/icon-more-cur.png"
              v-if="showMore"
              class="icons"
            />
            <img src="@/assets/icon-more.png" v-else class="icons" />
            <span class="text" :class="{ blue: showMore }">更多操作</span>
          </div>

          <div class="show-more-box" v-if="showMore">
            <div class="more-btns" @click="handleTAi">
              <img src="@/assets/icon-drop-ai.png" class="more-icons" />

              <span class="text">AI测评</span>
            </div>

            <div class="more-btns">
              <img src="@/assets/icon-drop-number.png" class="more-icons" />
              <span class="text">数字孪生</span>
            </div>
            <div class="more-btns" @click="handleShowHomeWork">
              <img src="@/assets/icon-drop-publish.png" class="more-icons" />
              <span class="text">分发作业</span>
            </div>
          </div>
        </div>

        <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-go.png" class="icons" />

          <span class="text">实验演示</span>
        </div>
        <div class="btn-line"></div>
        <div class="header-btn" @click="handleTo">开始授课</div>
      </div>
    </div>
    <div class="preview-box">
      <div class="preview-sider">
        <sider-step  :datas="datas"/>
      </div>
      <div class="preview-main">
        <div class="iframe-box">
          <iframe :src="iframeUrlNew" ref="iframeRef" class="iframe"></iframe>
        </div>
      </div>
    </div>
    <a-modal v-model:open="isShowHomeWork" title="发布作业">
      <div class="option-dialog">
        <div class="content">
          <a-form
            layout="vertical"
            ref="formRef"
            :model="formState"
            :rules="rules"
          >
            <a-form-item label="时间要求" name="dateRange">
              <a-range-picker v-model:value="formState['dateRange']" />
            </a-form-item>
            <a-form-item label="选择班级" name="class_id_list">
              <a-checkbox-group v-model:value="formState.class_id_list">
                <a-checkbox
                  :value="item.class_id"
                  :key="index"
                  v-for="(item, index) in classData"
                  >{{ item.name }} {{ item.student_count }}人</a-checkbox
                >
              </a-checkbox-group>
            </a-form-item>
            <a-form-item label="作业要求" name="description">
              <a-textarea
                v-model:value="formState.description"
                placeholder="请输入作业要求"
              />
            </a-form-item>
            <a-form-item label="思考" name="think">
              <a-textarea
                v-model:value="formState.think"
                placeholder="请输入思考题,以回车分隔题目"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handlePubulish"
          >发布作业</a-button
        >
      </template>
    </a-modal>
  </div>
</template>
<script setup>
import headerCenter from "@/components/standard/header-center.vue";
import siderStep from "@/components/standard/sider-step.vue";
import { useRouter } from "vue-router";
import { onMounted, ref, computed } from "vue";
import { iframeUrl } from "@/utils/iframe";
import API from "@/api/user";
import { message } from "ant-design-vue";
import { useEventStore } from "@/store/modules/events";
import { useTipsStore } from "@/store/modules/tips";
const tipsStore = useTipsStore();
const store = useEventStore();
const router = useRouter();
//const iframeUrl = "http://localhost:5173/";
const tags = ref(["AI", "孪"]);
const query = computed(() => router.currentRoute.value.query);
const iframeUrlNew = computed(() => `${iframeUrl}&expid=${query.value.code}`);
const isShow = computed(() => {
  return query.value.expuid != null && query.value.expuid != "";
});
const showMore = ref(false);
const handleToggleMore = () => {
  showMore.value = !showMore.value;
};
const datas = ref();
const getData = async () => {
  const res = await API.ExperimentFetchModel({
    experiment_id: query.value.id,
  });
  datas.value = res;
  console.log(res);
};
const iframeRef = ref(null);
//实验3d交互方向控制
const handleChangeDirection = (value) => {
  console.log("实验3d交互方向控制", value);
  let datas = {
    type: "changeDirection",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
//实验3d交互大小控制
const handleChangeSize = (value) => {
  console.log("实验3d交互大小控制", value);
  let datas = {
    type: "changeSize",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
//实验3d交互历史记录控制
const handleChangeHistory = (value) => {
  console.log("实验3d交互历史记录控制", value);
  let datas = {
    type: "changeHistory",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
const isShowHomeWork = ref(false);
const handleShowHomeWork = () => {
  isShowHomeWork.value = true;
};
const handleTAi = ()=>{
  window.open('http://lab-score-web.fantasy-lab.com/','_blank')
}
const formRef = ref(null);
const formState = ref({
  dateRange: [],
  class_id_list: [],
  description: "",
  think: "",
});
const rules = {
  dateRange: [{ required: true, message: "请选择时间范围", trigger: "change" }],
  name: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
  class_id_list: [{ required: true, message: "请选择班级", trigger: "change" }],
  description: [{ required: true, message: "请输入作业要求", trigger: "blur" }],
};
const handlePubulish = () => {
  formRef.value.validate().then(async () => {
    console.log("表单验证成功", formState.value);
    let params = {
      experiment_id: query.value.id,
      class_id_list: formState.value.class_id_list,
      begin_date: formState.value.dateRange[0],
      end_date: formState.value.dateRange[1],
      description: formState.value.description,
      think: formState.value.think,
    };
    const res = await API.HomeworkTeacherCreateHomework(params);
    console.log(res)
    message.success("发布成功");
    isShowHomeWork.value = false;
    //HomeworkTeacherCreateHomework
  });
};
const classData = ref();
const getClassData = async () => {
  const res = await API.ClazzPagedList({args:{ current: 1, pageSize: 9999,for_teacher: true }});
  console.log(res);
  classData.value = res.data;
};
onMounted(async () => {
  await getData();
  await getClassData();
});
const handleGoTo = () => {
  if (query.value.type == 1) {
    router.push({
      path: "/experiment1",
      query: {
        id: query.value.id,
        type: query.value.type,
        code: query.value.code,
        expuid: query.value.expuid,
      },
    });
  } else if (query.value.type == 2) {
    router.push({
      path: "/experiment2",
      query: {
        id: query.value.id,
        type: query.value.type,
        code: query.value.code,
        expuid: query.value.expuid,
      },
    });
  } else if (query.value.type == 3) {
    router.push({
      path: "/experiment3",
      query: {
        id: query.value.id,
        type: query.value.type,
        code: query.value.code,
        expuid: query.value.expuid,
      },
    });
  }
};
const handleTo = async () => {
  store.setResetState();
  tipsStore.clearTipState();
  let params = {
    experiment_id: query.value.id,
    homework_id: query.value.homework_id,
    name: datas.value.name,

    source_id: query.value.source_id,
  };

  const res = await API.TeacherExperimentCreateTeacherExperiment(params);
  console.log(res, "res");
  if (res) {
    let expuid = res.teacher_experiment_id;
    if (query.value.type == 1) {
      router.push({
        path: "/experiment1",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: expuid,
          homework_id: query.value.homework_id,
        },
      });
    } else if (query.value.type == 2) {
      router.push({
        path: "/experiment2",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: expuid,
          homework_id: query.value.homework_id,
        },
      });
    } else if (query.value.type == 3) {
      router.push({
        path: "/experiment3",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: expuid,
          homework_id: query.value.homework_id,
        },
      });
    }
    //  else {
    //   router.push({
    //     path: "/experiment",
    //     query: {
    //       id: query.value.id,
    //       name: query.value.name,
    //       tag: query.value.tag,
    //     },
    //   });
    // }
  }
};
</script>
<style lang="less" scoped>
.preivew-wrapper {
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  margin: -12px;
  box-sizing: border-box;
}

.header-bar {
  display: flex;
  padding: 0 16px;
  height: 50px;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
  .header-title {
    display: flex;
    align-items: center;
    .tags {
      padding: 0 8px;
      height: 24px;
      background: #eb61171a;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #eb6117;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    .title-text {
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #262930;
    }
  }
  .header-btns {
    display: flex;
    align-items: center;
    .btn-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 16px;
    }
    .btns {
      display: flex;
      align-items: center;
      height: 20px;
      cursor: pointer;
      position: relative;
      .icons {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262930;
        &.num {
          font-family: DS-Digital;
          font-size: 16px;
        }
        &.blue {
          color: #2776ff;
        }
      }
      .flex {
        display: flex;
        align-items: center;
      }
      .show-more-box {
        position: absolute;
        left: 0;
        top: 25px;
        width: 126px;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        box-shadow: 0 2px 20px 0 #0050cb14;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 8px;
        z-index: 99;

        .more-btns {
          display: flex;
          align-items: center;
          height: 40px;
        }
        .more-icons {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
    }
    .header-btn {
      padding: 0 14px;
      height: 30px;
      cursor: pointer;
      background: #2776ff;
      border-radius: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #ffffff;
    }
  }
}
.preview-box {
  height: calc(100% - 51px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  position: relative;
  .preview-sider {
    position: absolute;
    width: 64px;
    left: 16px;
    top: 50%;
    height: 336px;
    transform: translateY(-50%);
    background: #fff;
    z-index: 99;
    border-radius: 8px;
  }
  .preview-main {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    .iframe-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .iframe {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 0;
      }
    }
  }
}
</style>
